<template>
    <div class="mouldAddPages" >
        <div class="form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="用户名：" prop="username">
                <el-input v-model.trim="ruleForm.username" clearable></el-input>
                <div style="color:#999">6~15位字母或数字组成、大小写敏感，支持下划线</div>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input  type="password"  v-model.trim="ruleForm.password" autocomplete="off" clearable></el-input>
                <div style="color:#999">8~16位,数字、大/小写字母、特殊字符` - = [ ] \ ; ' , . / ~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? ·</div>
            </el-form-item>
           <el-form-item label="确认密码：" prop="confirmPassword">
                <el-input  type="password"  v-model.trim="ruleForm.confirmPassword" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="角色：" prop="rids">
                <el-radio-group v-model="ruleForm.rids">
                    <el-radio label=1 >管理员</el-radio>
                    <el-radio label=2 >普通用户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" v-model.trim="ruleForm.remark" :autosize="{ minRows: 4, maxRows: 8}" clearable  maxlength="200" show-word-limit></el-input>
            </el-form-item>
            
            </el-form>
        </div>
        
        <div class="bottom">
            <el-button @click="$router.go(-1)" class="back">返回</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" class="sure">立即创建</el-button>
        </div>
    </div>
</template>

<script>
import lines from '../../../components/lines.vue'
import { addAdminUser } from '../../../api/index'
export default {
    components:{
        lines,
    },
    data(){
        var nameRules = (rule, value, callback) => {
            var nameRule = /^[a-zA-Z0-9_]{6,15}$/ 
            if (value === '') {
                callback(new Error('请输入用户名'));
            } else if(!nameRule.test(value)){
                callback(new Error('请输入正确用户名'));
            }else{
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            var passRule = /^[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,16}$/ 
            if (value === '') {
                callback(new Error('请输入密码'));
            }else if(!passRule.test(value)){
                callback(new Error('密码格式不正确'));
            } else {
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return{
            token:'',
            ruleForm: {
                username: '',
                password: '',
                confirmPassword: '',
                rids:'',
                remark: '',
            },
            rules: {
                username: [
                    { validator: nameRules ,trigger: 'blur' ,required: true},
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' ,required: true }
                ],
                confirmPassword: [
                    { validator: validatePass2, trigger: 'blur' ,required: true }
                ],
                rids: [
                    { required: true, message: '请选择角色', trigger: 'change' ,required: true }
                ],
                
            }
        }
    },
    mounted(){
        this.initOption()
        this.token = sessionStorage.getItem('token')
        
    },
    methods:{
        initOption(){
            
        },
        
        medieSure(){
            
        },
        back(){
            this.$router.push('/home/user')
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                console.log(this.ruleForm)
            if (valid) {
                let params = _.cloneDeep(this.ruleForm)
                params.rids = [Number(params.rids)]
                
                addAdminUser(params).then(res=>{
                    let data = res.data
                    if(data.status == 0){
                        this.$message({
                            message: '新建成功',
                            type: 'success'
                        });
                        this.$router.push('/home/user')
                    }else{
                        this.$message({
                            message: data.message,
                            type: 'error'
                        });
                    }
                    console.log(res)
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang='less' scoped>
.mouldAddPages{
    width: 100%;
    height: 716px;
    padding: 20px 30px;
    box-sizing: border-box;
    background-color: rgba(40, 44, 65, 1);
    /deep/.el-form-item__label{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
    }
    /deep/.el-input {
        width: 400px;
    }
    /deep/.el-input__inner {
        background-color: #4F5367 ;
        border-radius: 2px;
        border: 1px solid #7A7F8E;
        color: #fff;
        height: 32px;
        line-height: 32px;
        padding: 0 15px;
        overflow:hidden; 
        text-overflow:ellipsis; 
        white-space:nowrap;
        width: 400px;
    }
    /deep/.el-textarea {
        width: 400px;
    }
    /deep/.el-textarea__inner {
        background-color: #4F5367 ;
        border-radius: 2px;
        border: 1px solid #7A7F8E;
        color: #fff;
        width: 400px;
    }
    /deep/.el-textarea .el-input__count {
        color: #fff;
        background: #4F5367;
    }
    /deep/.el-form-item__content {
        font-size: 12px;
    }
    .form{

    }
    .bottom{
        position: fixed;
        width: calc(100% - 200px);
        background-color: #282C41;
        bottom: 0;
        left: 200px;
        height: 70px;
        line-height: 70px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 53px;
        box-sizing: border-box;
        .sure{
            color: #63E9FF;
            border: 1px solid #00CEF0;
            background-color: rgba(49, 203, 236, 0.1400);
            border-radius: 2px;
            width: 122px;
        }
        .back{
            background-color: transparent;
            border: 1px solid #fff;
            color: #fff;
            border-radius: 2px;
            width: 122px;
        }
    }
}
</style>